<template>
  <div class="common-layout">
    <el-row :gutter="8">

      <!-- 左侧布局 -->
      <el-col :span="8">
        <!-- <div>container 1-1</div> -->
        <el-row :gutter="8">
          <el-col :span="12">
            <el-container class="flex with-border headToolbar" direction="horizontal">
              <el-text class="mx-1">退化预测：</el-text>
              <el-switch v-model="value5" class="ml-2" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="开启"
                inactive-text="关闭" />
            </el-container>
          </el-col>
          <el-col :span="12">
            <el-container class="flex with-border headToolbar" direction="horizontal">
              <el-text class="mx-1">模型状态：</el-text>
              <el-switch v-model="value5" class="ml-2" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="开启"
                inactive-text="关闭" />
            </el-container>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="18">
            <el-container class="flex with-border headToolbar" direction="horizontal">
              <el-text class="mx-1">运行模型版本：xxxxxxxx</el-text>
            </el-container>
          </el-col>
          <el-col :span="6">
            <el-container class="flex with-border headToolbar" direction="horizontal">
              <el-text class="mx-1">模型状态：xxxxxxxx</el-text>
            </el-container>
          </el-col>
        </el-row>
        <div class="with-border">
          <div class="flex" style="height: 500px;">
            这是一个seq2seq的网络结构图
            标注网络参数，并对更新参数标红
          </div>
        </div>
      </el-col>

      <!-- 右侧布局 -->
      <el-col :span="16">
        <!-- <div>container 1-2</div> -->
        <div class="with-border">
          <el-row class="with-border" style="height: 300px;">
            <el-tabs v-model="activeName" type="card" class="de-tabs" @tab-click="handleClick">
              <el-tab-pane label="在线遥测退化预测" name="first">User</el-tab-pane>
              <el-tab-pane label="历史数据退化预测" name="second">Config</el-tab-pane>
            </el-tabs>
          </el-row>
          <el-row class="with-border" style="height: 305px;">
            <el-row :gutter="8">
              <el-col :span="12">
                <div class="with-border">
                  这是个退化预测的LOGxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </div>
              </el-col>
              <el-col :span="12">
                <div class="with-border">
                  <el-row class="with-border">
                    <div style="height: 122px;">
                      这是个PSI实时变化曲线
                      用于判断数据飘移</div>
                  </el-row>
                  <el-row class="with-border">
                    <div style="height: 122px;">
                      这里是PSI历史超限记录
                      与
                      一些模型更新相关的时间记录</div>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { useRoute } from 'vue-router'
// import { useStore } from 'vuex'
// import { ElMessage } from 'element-plus'
// import { useI18n } from 'vue-i18n'
import LineChart from '@/views/dashboard/components/LineChart.vue'
const value5 = ref(true)

const value = ref('')

const activeName = ref('first')

onMounted(() => {

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
</script>

<style scoped lang="scss">
.with-border {
  width: 100%;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 16px;
  justify-content: space-around;
}

.headToolbar {
  height: 50px;
  align-items: center;
}

.el-row {
  margin-bottom: 6px;
  width: 100%;
}

.el-row:last-child {
  margin-bottom: 0;
}

.de-tabs{
  width: 100%;
}
.de-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

</style>
